<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card style="margin-bottom: 10px">
          距离考试结束还有：
          <fy-timer v-model="paperData.leftSeconds" @timeout="handHandExam" />

          <el-button
            style="float: right; margin-top: -10px"
            type="primary"
            icon="el-icon-plus"
            :loading="loading"
            @click="handHandExam()"
          >
            交卷
          </el-button>
        </el-card>
      </el-col>

      <el-col :span="6" :xs="24" style="margin-bottom: 10px">
        <el-card>
          <p class="card-title">答题卡</p>
          <el-row :gutter="24" class="card-line" style="padding-left: 10px">
            <el-tag type="info">未作答</el-tag>
            <el-tag type="success">已作答</el-tag>
          </el-row>

          <div
            v-if="paperData.radios !== undefined && paperData.radios.length > 0"
          >
            <p class="card-title">单选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.radios"
                :type="cardItemClass(item.answered, item.quId)"
              >
                {{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div
            v-if="paperData.multis !== undefined && paperData.multis.length > 0"
          >
            <p class="card-title">多选题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.multis"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div
            v-if="paperData.judges !== undefined && paperData.judges.length > 0"
          >
            <p class="card-title">判断题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.judges"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>

          <div v-if="paperData.jdts !== undefined && paperData.jdts .length > 0">
            <p class="card-title">简答题</p>
            <el-row :gutter="24" class="card-line">
              <el-tag
                @click="toQu(item)"
                v-for="item in paperData.jdts"
                :type="cardItemClass(item.answered, item.quId)"
                >{{ item.sort }}</el-tag
              >
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card class="qu-content">
          <p v-if="quData.quDetail.content">
            {{ quData.quDetail.sort }}.<span
              v-html="quData.quDetail.content"
            ></span>
          </p>
          <!-- <p v-if="quData.image!=null && quData.image!=''">
               <el-image :src="quData.image" style="max-width:100%;" />
             </p> -->
          <!-- 单选、判断 -->
          <div v-if="quData.quDetail.quType === 1 || quData.quType === 3">
            <el-radio-group v-model="radioValue">
              <el-radio v-for="item in quData.answers" :label="item.id"
                >{{ item.abc }}.{{ item.content }}
                <div
                  v-if="item.image != null && item.image != ''"
                  style="clear: both"
                >
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 多选题 -->
          <div v-if="quData.quDetail.quType === 2">
            <el-checkbox-group v-model="multiValue">
              <el-checkbox v-for="item in quData.answers" :label="item.id"
                >{{ item.abc }}.{{ item.content }}
                <div
                  v-if="item.image != null && item.image != ''"
                  style="clear: both"
                >
                  <el-image :src="item.image" style="max-width: 100%" />
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 简答题 -->
          <div v-if="quData.quDetail.quType === 4">
            <el-input v-model="fillanswerDTO.answer"></el-input>
          </div>
        </el-card>

        <div style="margin-top: 20px">
          <el-button
            v-if="showPrevious"
            type="primary"
            icon="el-icon-back"
            @click="handPrevious()"
          >
            上一题
          </el-button>

          <el-button
            v-if="showNext"
            type="warning"
            icon="el-icon-right"
            @click="handNext()"
          >
            下一题
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { dtk, fillanswer, handlepaper } from '@/api/paper'
import { getQudetail } from '@/api/qu'
//导入组件
import fyTimer from '@/components/fyTimer.vue'
export default {
  data () {
    return {
      loading: false,
      paperData: {},
      cardItem: {}, //记录当前作答题目
      currentIndex: 0,
      quData: { quDetail: {}, answers: [] },
      multiValue: [],
      showPrevious: true,
      showNext: true,
      allCards: [], //存放所有题目
      radioValue: '',
      fillanswerDTO: {
        answerIds: []
      }
    }
  },
  //定义组件
  components: {
    fyTimer
  },
  methods: {
    fetchPaperData (paperId) {
      dtk(paperId).then(res => {
        this.paperData = res.data
        //初始化cardItem
        // if (this.paperData.radios) {
        //   this.cardItem = this.paperData.radios[0]
        // } else if (this.paperData.multis) {
        //   this.cardItem = this.paperData.multis[0]
        // } else if (this.paperData.judges) {
        //   this.cardItem = this.paperData.judges[0]
        // } else {
        //   this.cardItem = this.paperData.saqs[0]
        // }

        // res.data.radios.forEach(item => {
        //   this.allCards.push(item)
        // })

        // res.data.multis.forEach(item => {
        //   this.allCards.push(item)
        // })

        // res.data.judges.forEach(item => {
        //   this.allCards.push(item)
        // })
        // res.data.saqs.forEach(item => {
        //   this.allCards.push(item)
        // })

        // //渲染第一道题
        // this.fetchQuDetail(this.cardItem.quId)

        // // //按钮渲染
        // this.preNextIsShow()
      })
    },

    //获取题目的详情
    fetchQuDetail (quId) {
      console.log('!!!!')
      getQudetail(this.paperId, quId).then(res => {
        console.log(res)
        this.quData = res.data

        // //radiosvalue
        // if(this.quData.quType == 1 || this.quData.quType == 3){
        //    this.quData.answers.forEach(item=>{
        //      if( item.checked == 1){
        //         this.radioValue = item.answerId ;
        //      }
        //    })

        // }

        // //multivalues
        //   if(this.quData.quType == 2){
        //    this.multiValue = [];
        //    this.quData.answers.forEach(item=>{
        //      if( item.checked == 1){
        //         this.multiValue.push(item.answerId );
        //      }
        //    })

        // }
      })
    },
    // 答题卡样式
    cardItemClass (answered, quId) {
      if (quId === this.cardItem.quId) {
        return 'warning'
      }

      if (answered) {
        return 'success'
      }

      if (!answered) {
        return 'info'
      }
    },

    toQu (item) {
      this.radioValue = ''
      this.multiValue = []

      this.cardItem = item
      //查询题目的详情
      this.fetchQuDetail(item.quId)

      this.preNextIsShow()
    },
    preNextIsShow () {
      this.allCards.forEach((item, index) => {
        if (item.sort == this.cardItem.sort) {
          this.currentIndex = index
        }
      })

      if (this.currentIndex == 0) {
        this.showPrevious = false
        this.showNext = true
      } else if (this.currentIndex == this.allCards.length - 1) {
        this.showPrevious = true
        this.showNext = false
      } else {
        this.showPrevious = true
        this.showNext = true
      }
    },
    handPrevious () {
      //提交答案
      this.fillanswerDTO.paperId = this.paperId
      this.fillanswerDTO.quId = this.cardItem.quId

      //单选题、判断题
      if (this.radioValue != '') {
        this.fillanswerDTO.answerIds = [this.radioValue]
      }

      //多选题
      if (this.multiValue.length > 0) {
        this.fillanswerDTO.answerIds = this.multiValue
      }

      fillanswer(this.fillanswerDTO).then(res => {
        //进入上一道题
        this.cardItem = this.allCards[this.cardItem.sort - 2]

        this.fetchQuDetail(this.cardItem.quId)
        this.preNextIsShow()
      })
    },
    handNext () {
      //提交答案
      this.fillanswerDTO.paperId = this.paperId
      this.fillanswerDTO.quId = this.cardItem.quId

      if (this.radioValue != '') {
        this.fillanswerDTO.answerIds = [this.radioValue]
      }

      if (this.multiValue.length > 0) {
        this.fillanswerDTO.answerIds = this.multiValue
      }

      fillanswer(this.fillanswerDTO).then(res => {
        console.log(res)

        //进入下一道题
        this.cardItem = this.allCards[this.cardItem.sort]

        this.fetchQuDetail(this.cardItem.quId)
        this.preNextIsShow()
      })
    },
    handHandExam () {
      handlepaper(this.paperId).then(res => {
        console.log(res)
      })
    }
  },
  created () {
    //获取试卷id
    this.paperId = this.$route.query.paperId
    if (this.paperId) {
      //获取试卷信息
      this.fetchPaperData(this.paperId)
    }
  }
}
</script>

<style scoped>
.qu-content div {
  line-height: 30px;
}

.el-checkbox-group label,
.el-radio-group label {
  width: 100%;
}

.card-title {
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}
.card-line {
  padding-left: 10px;
}
.card-line span {
  cursor: pointer;
  margin: 2px;
}

/deep/ .el-radio,
.el-checkbox {
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

.is-checked {
  border: #409eff 1px solid;
}

.el-radio img,
.el-checkbox img {
  max-width: 200px;
  max-height: 200px;
  border: #dcdfe6 1px dotted;
}

/deep/ .el-checkbox__inner {
  display: none;
}

/deep/ .el-radio__inner {
  display: none;
}

/deep/ .el-checkbox__label {
  line-height: 30px;
}

/deep/ .el-radio__label {
  line-height: 30px;
}
</style>
